<template>
  <div class="List" :style="{width:$store.state.screenWidth+'px'}">
    <el-row :gutter="30" >
      <el-col :span="15">
       <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/' }">列表页 </el-breadcrumb-item >

      </el-breadcrumb>
        <b>{{listName}}</b>
      </div>
    </template>
    <ul>
      <li v-for="el in arr" :key="el.id">
        <router-link :to="detailName + el.id">
        <section>
          
          <h4 v-text="el.title"></h4>
          <div class="bbox">
          <div class="box">
          <p v-text="el.param"></p>
          <div class="num">
            <span><el-icon ><Timer /></el-icon>{{el.date}}</span>
            <span><el-icon style="vertical-align: middle;"><View /></el-icon>200</span>
          </div>
          </div>
           <aside>
          <img :src="el.src" alt="" >
        </aside>
        </div>
        </section>
       
        </router-link>
      </li>
    </ul>
    <div style="margin: 0 auto;">
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="changePage"  />
    </div>
  </el-card>
      </el-col>
      <el-col :span="9" class="bar">
    <BarVue></BarVue>
    </el-col>
    </el-row>
  </div>
</template>
<script>
import BarVue from '@/components/Bar.vue';

export default{
    name: "ListCom",
    data() {
        return {
            listName: "",
            listType: "",
            curPage: 0,
            arr: [],
            total: 0,
            detailName:""
        };
    },
    components:{
        BarVue
    },
  
    mounted() {
        this.listType = this.$route.params.newType;
        this.subPage();
   
    },
    methods: {
        changePage(num){
            this.curPage = num - 1;
            this.subPage();
        },
        subPage(){
           const datatype=this.listType;
             switch (datatype) {
            case "headlines":
                this.listName = "头条关注";
                this.detailName='/detail/headlines/'
                break;
            case "comprehensive":
                this.listName = "综合新闻";
                this.detailName='/detail/comprehensive/'
                break;
            case "learning":
                this.listName = "学术动态";
                this.detailName='/detail/learning/'
                break;
            case "story":
                this.listName = "师大故事";
                this.detailName='/detail/story/'
                break;
              case "video":
                this.listName = "视频新闻";
                this.detailName='/detailVid/'
                break;
              case "images":
                this.listName = "图片新闻";
                this.detailName='/detailImg/'
                break;
                  case "newest":
                this.listName = "最新新闻";
                this.detailName='/detail/newest/'
                break;
                 case "newhot":
                this.listName = "最热新闻";
                this.detailName='/detail/newhot/'
                break;
                
        }

       
        let clsType="";
        if(datatype==="video"){
          clsType="Video"
        }else if(datatype==="images"){
           clsType="Images"
        }
        else{
          clsType="news"
        }
            let params = { type:datatype, start: this.curPage * 6, clsType};
          
               this.$axios.get("getListMsg", { params }).then((rs) => {
                 
                if(datatype==="video" || datatype==="images"){
                  this.arr = rs.map((el) => {
                      let obj = {};
                    obj.param = el.content;   
                    obj.src = (datatype==="video")?this.$store.state.URL+"video/"+el.src:this.$store.state.URL+"photoes/"+el.src;
                    obj.date = new Date(el.updatedAt).toLocaleDateString();
                    obj.title = el.title;
                    obj.id = el.id;
                    return obj;
                });
                }
             else{
               this.arr = rs.map((el) => {
                  let obj = {};
                   obj.param = el.content.match(/<p>[^>]+>/)[0].replace(/<p>|<\/p>/g, "");
                    let src = el.content.match(/src="[^"]+"/)[0];
                    obj.src = src.substring(5, src.length - 1);
                    obj.date = new Date(el.updatedAt).toLocaleDateString();
                    obj.title = el.title;
                    obj.id = el.id;
                   
                    return obj;
                });
            }
           });
            params = {
            type:datatype,
            clsType,
        };
        this.$axios.get("getListTotal", { params }).then(rs => {
            this.total = rs;
        });
        }
    },
      watch:{
      $route(){
        this.listType=this.$route.path.substr(6)
        this.subPage();
      }
    }
   
}


</script>
<style scoped lang="less">
.List{
  

   margin:170px  auto 100px;
  .el-row{
   .el-col{
    .el-card{
      ul{
        list-style: none;
        padding: 0;
       
        li{
           padding-bottom: 10px;
          a,a:visited{
            
            text-decoration: none;
           
            
            section{
               h4{
                color: #00a4df;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
               
                overflow: hidden;
                &:hover{
                  color: black;
                }
              }
              .bbox{
                display: flex;

                .box{
                  flex:5;
                  margin-top: -10px;
                  margin-right: 20px;
                  .num{
                color: rgb(82, 92, 89);
                font-size: 13px;
                span{
                  margin-right: 10px;
                }
              }
             
              p{
                font-size: 14px;
                line-height: 1.45;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                word-break: break-all;
                overflow: hidden;
                text-indent: 2em;
                color: black;
                &:hover{
                  color: rgb(71, 89, 141);
                }
              }
            }   
                aside{
             flex: 3;
              height: 140px;
              display: flex;
              justify-items: center;
              
              
              img{
             
                width: 100%;
                height: 100%;
              }

            }
                }
              }
              
           
          }
        }
      }
      .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
    
  
}
    }
   }
  }
}
</style>

